<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Autocomplete - Remote datasource</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <style>
            .ui-autocomplete-loading {
                background: white url('public/img/ui-anim_basic_16x16.gif') right center no-repeat;
            }
        </style>
        <script>
            $(function() {
                function log(message) {
                    $("<div>").text(message).prependTo("#log");
                    $("#log").scrollTop(0);
                }
                $("#birds").autocomplete({
                    source: "search.php",
                    minLength: 2,
                    select: function(event, ui) {
                        log(ui.item ?
                                "Selected: " + ui.item.value + " aka " + ui.item.id :
                                "Nothing selected, input was " + this.value);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="ui-widget">
            <label for="birds">Birds: </label>
            <input id="birds">
        </div>
        <div class="ui-widget" style="margin-top:2em; font-family:Arial">
            Result:
            <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
        </div>
    </body>
</html>